<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/milligram.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />

    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/jQueryCode.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<style>
    p{display: inline}
    .star_list{
        width: 100px;
    }
    .star_list a{
        font-size: 15px;
        text-decoration: none;
    }
</style>
<body>
<div class="top-nav animation-bg-color-skyblue">
    <div class="logo">
        <a href="#"><img th:src="@{/img/logo.png}" /></a>
    </div>
    <div class="account-check fr">
        <div class="before-login">
            <a class="a-btn animation" href="/user/login">
                <span class="icon-enter"></span>登录
            </a>
            <a class="a-btn animation" href="/user/register">
                <span class="icon-user-plus"></span>注册
            </a>
        </div>
        <div class="after-login hide">
            <!--<a class="a-btn animation fr" href="#">-->
            <!--<span class="icon-exit"></span>退出-->
            <!--</a>-->
            <h5 class="fr">欢迎登陆:13049148938</h5>
        </div>
    </div>

    <div class="s-side animation-bg-color-skyblue">
        <ul>
            <!--这部分是导航栏信息。-->
            <li class="s-firstItem first">
                <a href="/user/index">
                    <i class="fa fa-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <!--查找-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>查找</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toFindEval">
                            查找医生&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--预约挂号-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>预约挂号</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/reservation/toReserve">
                            预约&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>

            <!--社区-->
            <li class="first">
                <div class="d-firstNav s-firstNav">
                    <i class="fa fa-bars"></i>
                    <span>社区</span>
                    <i class="fa fa-caret-right fr" ></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>文章</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toSendArticle">
                                    发表文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/community/showArticle">
                                    浏览文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>帖子</span>
                            <i class="fa fa-caret-right fr "></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toCommunity">
                                    浏览帖子&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <!--个人中心-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>个人中心</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>个人资料</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/user/userInfo">
                                    个人信息&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/password">
                                    修改密码&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/verify">
                                    实名认证&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>钱包</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/reservation/toWallet">
                                    我的钱包&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toRecharge">
                                    充值&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toBill">
                                    我的账单&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/community/toCollection">
                            我的收藏&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toMyEvaluate">
                            我的评价&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="layout">
    <div class="container">
        <div class="row">
            <script>
                function timespace(endtime,starttime) {
                    var startTime = starttime.replace(/-/g,"/");
                    console.log("t_start="+startTime);
                    var s = new Date(startTime);

                    var endTime = endtime.replace(/-/g,"/");
                    var e = new Date(endTime);
                    console.log("t_endtime="+e);
                    var days="";
                    var num = (e-s)/(1000*3600*24);//计算出天数，取整数处理
                    console.log("天数:"+num);
                    //如果时间小于一天，则num=0,
                    if(num<1){
                        days = "用户当天追加评价"
                    }
                    else{
                        //时间刚好一天，或者更多，则算第二天
                        var time= parseInt(Math.ceil(num));//有余数进位加一
                        days = "用户"+time+"天后追加评价";
                    }
                    console.log("days="+days);
                    return days;
                }

                function  levelClick(numm){
                    var number = numm;
                    console.log(number);
                    var doctor ="[[${theDoctor}]]";
                    $.post("/evaluate/findEvalByStar",{doctorName:doctor,number:number},function (evalList){
                        $("#theEval").html("");
                        for(var i in evalList){
                            var num=evalList[i].level;
                            console.log("num"+num);
                            var eid = evalList[i].id;

                            var cont = "<div class='col-md-12'>";
                            cont += "<div class='" + eid + "'>";

                            cont += "<table class='tab-top-line'>";
                            cont += "<tr class='tab-info-tr'>";
                            cont += "<th>" + evalList[i].name + "</th>";
                            cont += "<td><div class='star-list" + " " + "box" + eid + "'></div></td></tr>";
                            cont += "<tr class='tab-info-tr'>";
                            cont += "<th></th><td>" + evalList[i].content + "</td></tr>";
                            cont += "<tr class='tab-info-tr'>";
                            cont += "<th></th><td><small>" + evalList[i].evaluateTime  + "</small></td></tr>";

                            //处理星星问题
                            var addontent =evalList[i].addContent;
                            console.log(evalList[i].addContent);
                            if (addontent!==null && addontent!==""){
                                var end= evalList[i].eTwiceTime;
                                console.log("end11111"+end);
                                var begin = evalList[i].evaluateTime;
                                console.log("begin11111"+begin);
                                if(end!==null && end!=="")
                                    var theTime =timespace(end,begin);

                                cont += "<tr class='tab-info-tr'>";
                                cont += "<th></th><td class='addCom'><small>" + theTime + "</small></td></tr>";
                                cont += "<tr class='tab-info-tr'>";
                                cont += "<th></th><td>" + addontent + "</td></tr>";

                            }
                            cont+="</table></div></div>";

                            $("#theEval").append(cont);//添加追评内容
                            for (var k = 1 ; k <= num ; k++) {
                                $(".box" + eid).append( "<a href='#' class='star" + k + "'>★</a>");
                                $(".box" + eid + " " + ".star" + k).css("color","red");
                            }
                            for(var j = num + 1 ; j <= 5 ; j++ )
                            {
                                $(".box" + eid).append( "<a href='#' class='star" + j + "'>★</a>");
                                $(".box" + eid + " " + ".star" + j).css("color","lightgray");
                            }
                        }
                    });//--post-End
                }

                //控制a标签的点击事件
            </script>
            <!--评价分类-->
            <div class="col-12">
                <div class="container" id="aClick">
                    <ul class="nav">
                        <li class="nav-item">
                            <a href="#" class="nav-link" id="clickAll" onclick="levelClick(-1);">全部([[${evalNum}]])</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link" id="clickFive" onclick="levelClick(5);">好评([[${five}]])</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link" id="clickThree" onclick="levelClick(3);">中评([[${twoToFour}]])</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link" id="clickOne" onclick="levelClick(1);">差评([[${one}]])</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link" id="clickAdd" onclick="levelClick(-2);">追评([[${hasAdd}]])</a>
                        </li>
                    </ul>
                </div>
                <!--<div id="aClick">-->
                <!--&lt;!&ndash;全部 -1&ndash;&gt;-->
                <!--<a href='#' onclick="levelClick(-1);" id="clickAll">全部([[${evalNum}]])</a>-->
                <!--&lt;!&ndash;好评 5&ndash;&gt;-->
                <!--<a href='#' onclick="levelClick(5);" id="clickFive">好评([[${five}]])</a>-->
                <!--&lt;!&ndash;中评 3&ndash;&gt;-->
                <!--<a href='#' onclick="levelClick(3);" id="clickThree">中评([[${twoToFour}]])</a>-->
                <!--&lt;!&ndash;差评 0&ndash;&gt;-->
                <!--<a href='#' onclick="levelClick(1);" id="clickOne">差评([[${one}]])</a>-->
                <!--<a href='#' onclick="levelClick(-2);" id="clickAdd">追评([[${hasAdd}]])</a>-->
                <!--</div>-->
            </div>
            <!--评价内容-->
            <div class="col-12">
                <div class="row" id="theEval">
                    <!--点击分类评价是要被替换的部分 start-->
                    <div class="col-md-12" th:each="eval:${eadList}">
                        <div th:class="${eval.id}">
                            <table class="tab-top-line">
                                <!--用户名 及 评价星级-->
                                <!-------------star-box-insert 为 星星盒子 插入目标------------->
                                <tr class="tab-info-tr star-box-insert">
                                    <th th:text="${eval.name}"></th>
                                </tr>
                                <!--评价内容-->
                                <!-------------eval-insert 为 评价内容 插入目标------------->
                                <tr class="tab-info-tr eval-insert">
                                    <th></th>
                                </tr>
                                <!--评价时间-->
                                <tr class="tab-info-tr">
                                    <th></th>
                                    <td><small th:text="${eval.evaluateTime}"></small></td>
                                </tr>
                                <!--追评时间-->
                                <!-------------add-eval-time-insert 为 追评时间 插入目标------------->
                                <tr class="tab-info-tr add-eval-time-insert">
                                    <th></th>
                                </tr>
                                <!-------------add-eval-insert 为 追评内容 插入目标------------->
                                <tr class="tab-info-tr add-eval-insert">
                                    <th></th>
                                </tr>
                            </table>
                            <script>
                                //评价时间转化
                                ifAddContent();
                                //评价星级转化
                                function starShow() {
                                    var num  =[[${eval.level}]];
                                    var eid  = [[${eval.id}]];

                                    // -----------------------------插入星星 无需修改-----------------------------
                                    for (var i = 1 ; i <= num ; i++) {
                                        $(".box" + eid).append( "<a href='#' class='star" + i + "'>★</a>");
                                        $(".box" + eid + " " + ".star" + i).css("color","red");

                                    }
                                    for(var a = num + 1 ; a <= 5 ; a++ )
                                    {
                                        $(".box" + eid).append( "<a href='#' class='star" + a + "'>★</a>");
                                        $(".box" + eid + " " + ".star" + a).css("color","lightgray");
                                    }
                                    return -1;
                                }

                                //添加追加的内容
                                function ifAddContent(){
                                    var id = [[${eval.id}]];
                                    var theContent = "[[${eval.content}]]";
                                    var addContent = "[[${eval.addContent}]]";

                                    // -----------------------------星星盒子 已修改-----------------------------
                                    $("." + id + " " + ".star-box-insert").append("<td><div class='star_list box" + id + "'>"+"</div></td>");
                                    // <td>
                                    //     <div class="">
                                    //     </div>
                                    // </td>

                                    // -----------------------------插入评价内容 已修改-----------------------------
                                    $("." + id + " " + ".eval-insert").append("<td>" + theContent + "</td>");//添加评价内容
                                    // <td>评价内容</td>

                                    if (addContent !== null && addContent !== ""){
                                        var end = "[[${eval.eTwiceTime}]]";
                                        var begin = "[[${eval.evaluateTime}]]";
                                        if(end !== null && end !== "")
                                            var theTime =  timespace(end,begin);

                                        // -----------------------------插入追评时间 已修改-----------------------------
                                        $("."+ id + " " + ".add-eval-time-insert").append("<td class='addCom'><small>" + theTime + "</small></td>");//添加追评时间
                                        // <td class="addCom"><small>用户当天追评</small></td>

                                        // -----------------------------插入追评内容 已修改-----------------------------
                                        $("."+ id + " " + ".add-eval-insert").append( "<td>" + addContent+ "</td>");//添加追评内容
                                        // <td>追评内容</td>
                                    }
                                    starShow();
                                }

                            </script>
                        </div>
                    </div>
                    <!--点击分类评价是要被替换的部分 end-->
                    <script>
                        //当该医生没有评价时提示的内容：
                        function noContent() {
                            var content=[[${eadList}]];
                            if (content.length==0){
                                var con ="<div>该医生暂时没有任何评价</div>";
                                $("#theEval").html(con);
                            }
                        }
                        noContent();
                    </script>
                </div>
            </div>
        </div>
    </div>
    <script>
        function aclick() {
            var evalAll = [[${evalNum}]];
            var five = [[${five}]];
            var three = [[${twoToFour}]];
            var one = [[${one}]];
            var add = [[${hasAdd}]];

            if (evalAll===0){
                $("#clickAll").removeAttr( "onclick" );
                $("#aClick").html("没有评价");

            }
            if (five===0){
                $("#clickFive").removeAttr( "onclick" );

            }
            if (three===0){
                $("#clickThree").removeAttr( "onclick" );

            }
            if (one===0){
                $("#clickOne").removeAttr( "onclick" );

            }
            if (add===0){
                $("#clickAdd").removeAttr( "onclick" );
            }
            return -1;
        }
        aclick();
    </script>
    <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
</div>

</body>
</html>